<!--
 * @Author: 吴竹叶 2107206923@qq.com
 * @Date: 2023-09-27 16:02:37
 * @LastEditors: 赵天利 5450026+zhaotianli01@user.noreply.gitee.com
 * @LastEditTime: 2024-01-22 15:50:42
 * @FilePath: \BZ_JT_AnQuanHuanBaoGuanLiApp\src\views\staging\commom\statistics\safetyStatistic.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="safety-wrap">
    <div class="firms-box">
      <customTitle :is-icon="true" icon="&#xe790;" bg-color="#07cdd4" icon-color="#07cdd4" title="企业数量" />
      <div class="firms-content content-box">
        <div class="total">{{ firmsData.name }}
          <h3>{{ firmsData.value }}家</h3>
        </div>
        <ul>
          <li v-for="(it, ind) in firmsData.classifyData" :key="ind">
            <span class="name">{{ it.name }}</span>
            <b>{{ it.value }}{{ it.unit }}</b>
          </li>
        </ul>
      </div>
      <div class="firms-content1 content-box">
        <div class="total">{{ safetyfirmsData.name }}
          <h3>{{ safetyfirmsData.value }}家</h3>
        </div>
        <ul>
          <li v-for="(it1, ind1) in safetyfirmsData.classifyData" :key="ind1">
            <div>
              <span class="name">{{ it1.name }}:</span>
              <b>{{ it1.value }}{{ it1.unit }}</b>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="riskControl-box">
      <customTitle :is-icon="true" icon="&#xe790;" bg-color="#fcac00" icon-color="#fcac00" title="风险管控（个）" />
      <div class="riskControl-content riskControl-content content-box">
        <div class="total">{{ riskData.name }}
          <h3>{{ riskData.value }}</h3>
        </div>
        <ul>
          <li v-for="(it, ind) in riskData.classifyData" :key="ind">
            <span class="name">{{ it.name }}</span>
            <b>{{ it.value }}{{ it.unit }}</b>
          </li>
        </ul>
      </div>
      <div class="riskControl-content riskControl-content1 content-box">
        <div class="total">{{ majorRiskData.name }}
          <h3>{{ majorRiskData.value }}</h3>
        </div>
        <ul>
          <li v-for="(it, ind) in majorRiskData.classifyData" :key="ind">
            <span class="name">{{ it.name }}</span>
            <b>{{ it.value }}{{ it.unit }}</b>
          </li>
        </ul>
      </div>
      <div class="riskControl-content riskControl-content2 content-box">
        <div class="total">{{ dangerousOperations.name }}
          <h3>{{ dangerousOperations.value }}</h3>
        </div>
        <ul>
          <li v-for="(it, ind) in dangerousOperations.classifyData" :key="ind">
            <span class="name">{{ it.name }}</span>
            <b>{{ it.value }}{{ it.unit }}</b>
          </li>
        </ul>
      </div>
      <div class="riskControl-content riskControl-content3 content-box">
        <div class="total">{{ workingProcedure.name }}
          <h3>{{ workingProcedure.value }}</h3>
        </div>
        <ul>
          <li v-for="(it, ind) in workingProcedure.classifyData" :key="ind">
            <span class="name">{{ it.name }}</span>
            <b>{{ it.value }}{{ it.unit }}</b>
          </li>
        </ul>
      </div>
    </div>
    <div>
      <customTitle :is-icon="true" icon="&#xe790;" bg-color="#CEDEFF" icon-color="#6A99F9" title="安全生产投入（万元）" />
      <div class="firms-content1 content-box productionInput">
        <div class="total" style="width: 25%;">{{ productionInput.name }}</div>
        <ul style="width: 75%;">
          <li> <div> <span class="name">计提金额:</span> <b>{{ productionInput.data.currentActualAmount }}</b> </div> </li>
          <li> <div> <span class="name">年度支出费用:</span> <b>{{ productionInput.data.costNum }}</b> </div> </li>
          <li> <div> <span class="name">实际支出占计提金额比例:</span> <b>{{ productionInput.data.compleRateNum }}%</b> </div> </li>
          <li> <div> <span class="name">本年度结余:</span> <b>{{ productionInput.data.surplus }}</b> </div> </li>
        </ul>
      </div>
    </div>
    <div>
      <customTitle :is-icon="true" icon="&#xe790;" bg-color="#fcac00" icon-color="#fcac00" title="隐患排查治理（个）">
        <template #right>
          <custom-timer type="year" :is-interval="false" :is-title="false" :is-border="false" :date-value.sync="pitfallCurrenYear" @change="dangersData" />
        </template>
      </customTitle>
      <div class="danger-box danger-box-1">
        <div class="danger-content content-box">
          <div class="total">{{ dangerData.name }}
            <h3>{{ dangerData.value }}</h3>
          </div>
          <ul>
            <li v-for="(it, ind) in dangerData.classifyData" :key="ind">
              <span class="name">{{ it.name }}</span>
              <b>{{ it.value }}</b>
            </li>
          </ul>
        </div>
        <div class="danger-content danger-content1 content-box">
          <div class="total">{{ dangerRectifyData.name }}
            <h3>{{ dangerRectifyData.value }}</h3>
          </div>
          <ul>
            <li v-for="(it, ind) in dangerRectifyData.classifyData" :key="ind">
              <span class="name">{{ it.name }}</span>
              <b>{{ it.value }}</b>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <customTitle :is-line="true" bg-color="#3795ff" title="隐患类别统计">
      <template #right>
        <custom-timer type="year" :is-interval="false" :is-title="false" :is-border="false" :date-value.sync="safetyCurrenYear" @change="dangerCategoryAnalysis" />
      </template>
    </customTitle>
    <div ref="barChart" class="barChart-area" style="height: 200px;" />
    <customTitle :is-line="true" bg-color="#3795ff" title="危险作业统计">
      <template #right>
        <custom-timer type="year" :is-interval="false" :is-title="false" :is-border="false" :date-value.sync="currenYear" @change="secondYearChange" />
      </template>
    </customTitle>
    <div class="secondYear secondYearChange">
      <div ref="pieChart" style="height: 200px;text-align: center;" />
      <ul class="stasticBox">
        <li v-for="(it, ind) in stasticData" :key="ind" :style="ind === stasticData.length - 1 ? {width:'100%',marginRight:0} : {}">
          <div class="iconBox">
            <i class="iconfont" v-html="it.icon" />
          </div>
          <div class="numBox">
            <h3 class="name">{{ it.name }}</h3>
            <b>{{ it.value }}{{ it.unit }}</b>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import customTitle from '@/components/globals/custom-title.vue'
import customTimer from '@/components/common/custom-timer.vue'
import { lineHorizontalChart, pieChart } from '@/utils/chart'
import { parseTime } from '@/utils'
import {
  accidentEventFirstSy,
  analysisCount, beginTotalCount,
  dangerCategoryAnalysis,
  dangersLedgerRate,
  dangersLevelNum,
  getCompanyStatistics, getExpertStatistics, jobHealthMonitorRecordNum, jobLedgerCount, jobLedgerTotal
} from '@/api/commonPage/statistics'
import commonList from '@/assets/mixin/commonList'
export default {
  components: {
    customTitle,
    customTimer
  },
  mixins: [commonList],
  data() {
    return {
      firmsData: {
        name: '企业分类统计',
        value: 0,
        classifyData: [
          { name: 'A类', value: 0, unit: '家' },
          { name: 'B类', value: 0, unit: '家' },
          { name: 'C类', value: 0, unit: '家' },
          { name: 'D类', value: 0, unit: '家' }
        ]
      },
      safetyfirmsData: {
        name: '安全生产标准化建成企业数量',
        value: 0,
        classifyData: [
          { name: '安全标准化一级企业', value: 0, unit: '家' },
          { name: '安全标准化一级企业', value: 0, unit: '家' },
          { name: '安全标准化一级企业', value: 0, unit: '家' }
        ]
      },
      productionInput: {
        name: '本年度安全生产投入',
        value: 0,
        data: {}
      },
      riskData: {
        name: '易燃易爆危险点总数',
        value: 0,
        classifyData: [
          // { name: '易燃易爆危险总数', value: 0 },
          { name: 'Ⅰ级危险点', value: 0, unit: '个' },
          { name: 'Ⅱ级危险点', value: 0, unit: '个' },
          { name: 'Ⅲ级危险点', value: 0, unit: '个' }
        ]
      },
      majorRiskData: {
        name: '重大危险源总数',
        value: 0,
        classifyData: [
          { name: '一级', value: 0, unit: '个' },
          { name: '二级', value: 0, unit: '个' },
          { name: '三级', value: 0, unit: '个' },
          { name: '四级', value: 0, unit: '个' }
        ]
      },
      dangerousOperations: {
        name: '3-9人危险作业场所数量',
        value: 0,
        classifyData: []
      },
      workingProcedure: {
        name: '危险手工工序',
        value: 0,
        classifyData: []
      },
      dangerData: {
        name: '隐患数量',
        value: 0,
        classifyData: [
          { name: '重大隐患', value: 0, unit: '个' },
          { name: '一般隐患', value: 0, unit: '个' }
        ]
      },
      dangerRectifyData: {
        name: '隐患整改率',
        value: '0%',
        classifyData: [
          { name: '已整改', value: 0, unit: '个' },
          { name: '未整改', value: 0, unit: '个' }
        ]
      },
      currenYear: parseTime(new Date(), '{y}'),
      safetyCurrenYear: parseTime(new Date(), '{y}'),
      pitfallCurrenYear: parseTime(new Date(), '{y}'),
      stasticData: [
        { name: '本年度在聘专家数量', value: 0, icon: '&#xe607;', unit: '位' },
        { name: '有限空间数量', value: 0, icon: '&#xe6b7;', unit: '个' },
        { name: '本年度危险作业数量', value: 0, icon: '&#xe6b7;', unit: '个' },
        // { name: '本年度事故事件数量', value: 0, icon: '&#xe6b7;', unit: '个' },
        // { name: '危险手工工序数量', value: 0, icon: '&#xe72e;', unit: '个' },
        { name: '3-9人危险场所数量', value: 0, icon: '&#xe725;', unit: '个' },
        { name: '本年度新增职业病员工数量', value: 0, icon: '&#xe725;', unit: '人' }
      ],
      categoryAnalysis: { dataY: [], yzg: [], wzg: [] },
      ledgerTotal: [],
      apiNum: 0,
      loadApi: 0
    }
  },
  mounted() {
    this.getData()
  },
  inject: ['layout'],
  methods: {
    getData() {
      this.layout.showAreaLoading(['.productionInput', '.secondYear', '.firms-content', '.firms-content1', '.riskControl-content', '.riskControl-content1', '.riskControl-content2', '.riskControl-content3', '.danger-box', '.barChart-area'])
      this.getCompanyStatistics()
      this.analysisCount()
      this.dangersLevelNum()
      this.dangersLedgerRate()
      this.dangerCategoryAnalysis()
      this.jobLedgerTotal()
      this.getExpertStatistics()
      this.accidentEventFirstSy()
      this.jobLedgerCount()
      this.jobHealthMonitorRecordNum()
      this.beginTotalCount()
    },
    dangersData() {
      this.layout.showAreaLoading(['.danger-box'])
      this.dangersLevelNum()
      this.dangersLedgerRate()
    },
    hideLoading() {
      this.loadApi++
      if (this.loadApi >= this.apiNum) {
        this.layout.hideAreaLoading(['.productionInput', '.secondYear', '.firms-content', '.firms-content1', '.riskControl-content', '.riskControl-content1', '.riskControl-content2', '.riskControl-content3', '.danger-box', '.barChart-area'])
      }
    },
    secondYearChange() {
      this.layout.showAreaLoading(['.secondYear'])
      this.jobLedgerTotal()
      this.analysisCount()
      this.getExpertStatistics()
      this.accidentEventFirstSy()
      this.jobLedgerCount()
      this.jobHealthMonitorRecordNum()
    },
    async getCompanyStatistics() {
      this.apiNum++
      const { data, status } = await getCompanyStatistics()
      if (data && status === 0) {
        this.firmsData.value = data.companyTotal
        this.safetyfirmsData.value = data.standardConstructionTotal
        this.firmsData.classifyData[0].value = data.alevelTotal
        this.firmsData.classifyData[1].value = data.blevelTotal
        this.firmsData.classifyData[2].value = data.clevelTotal
        this.firmsData.classifyData[3].value = data.dlevelTotal
        this.safetyfirmsData.classifyData = data.standardConstructionLevelTotalList.map(val => ({
          name: val.category,
          value: val.value,
          unit: '家'
        }))
      }
      this.hideLoading()
    },
    async analysisCount() {
      this.apiNum++
      const { data, status } = await analysisCount({ companyIds: '-1', year: this.currenYear })
      if (data && status === 0) {
        const riskData = data.find(val => val.typeName === '易燃易爆危险点数量')
        this.riskData.value = riskData?.count
        this.riskData.classifyData = [/** {
         name: '易燃易爆危险总数',
         value: riskData.count
         },*/ ...riskData.allDetailTypeVo.map(val => ({
            name: val.typeName,
            value: val.count
          }))]
        const majorRiskData = data.find(val => val.typeName === '重大危险源数量')
        this.majorRiskData.value = majorRiskData.count
        this.majorRiskData.classifyData = majorRiskData.allDetailTypeVo.map(val => ({
          name: val.typeName.replace('重大危险源', ''),
          value: val.count
        }))

        const dangerousOperations = data.find(val => val.typeName === '3-9人危险作业场所')
        this.dangerousOperations.value = dangerousOperations.count
        this.dangerousOperations.classifyData = dangerousOperations.allDetailTypeVo.map(val => ({
          name: val.typeName,
          value: val.count
        }))

        const workingProcedure = data.find(val => val.typeName === '危险手工工序')
        this.workingProcedure.value = workingProcedure.count
        this.workingProcedure.classifyData = workingProcedure.allDetailTypeVo.map(val => ({
          name: val.typeName,
          value: val.count
        }))

        // this.stasticData[2].value = data.find(val => val.typeName === '危险手工工序')?.count
        this.stasticData[1].value = data.find(val => val.typeName === '有限空间数量')?.count
        this.stasticData[3].value = data.find(val => val.typeName === '3-9人危险作业场所')?.count
      }
      this.hideLoading()
    },
    // 本年度危险作业数量
    async jobLedgerCount() {
      this.apiNum++
      const { data, status } = await jobLedgerCount({ year: this.currenYear, companyIds: '-1' })
      if (data && status === 0) {
        this.stasticData[2].value = data.num.find((v) => v.typename === '危险作业数量')?.count
      }
      this.hideLoading()
    },
    // 本年度新增职业病员工数量
    async jobHealthMonitorRecordNum() {
      this.apiNum++
      const { status, data } = await jobHealthMonitorRecordNum({ companyIds: '-1', year: this.currenYear })
      if (status === 0 && data) {
        this.stasticData[4].value = data.yearDiagnosisSum
      }
      this.hideLoading()
    },
    // 本年度安全生产投入
    async beginTotalCount() {
      this.apiNum++
      const { data, status } = await beginTotalCount({ companyIds: '-1', years: new Date().getFullYear() })
      if (data && status === 0) {
        this.productionInput.data = data
      }
      this.hideLoading()
    },
    async dangersLevelNum() {
      this.apiNum++
      const { data, status } = await dangersLevelNum({ year: this.pitfallCurrenYear })
      if (data && status === 0) {
        this.dangerData.value = data[0].total
        this.dangerData.classifyData[0].value = data[0].zdTotal
        this.dangerData.classifyData[1].value = data[0].ybTotal
      }
      this.hideLoading()
    },
    async dangersLedgerRate() {
      this.apiNum++
      const { data, status } = await dangersLedgerRate({ year: this.pitfallCurrenYear })
      if (data && status === 0) {
        this.dangerRectifyData.value = data[0].zgl + '%'
        this.dangerRectifyData.classifyData[0].value = data[0].yzgTotal
        this.dangerRectifyData.classifyData[1].value = data[0].wzgTotal
      }
      this.hideLoading()
    },
    async dangerCategoryAnalysis() {
      this.apiNum++
      const { data, status } = await dangerCategoryAnalysis({ year: this.safetyCurrenYear })
      if (data && status === 0) {
        this.categoryAnalysis.dataY = data.map(val => val.typeName)
        this.categoryAnalysis.yzg = data.map(val => val.yzgNum)
        this.categoryAnalysis.wzg = data.map(val => val.wzgNum)
      }
      this.initBarChart()
      this.hideLoading()
    },
    async jobLedgerTotal() {
      this.apiNum++
      const { data, status } = await jobLedgerTotal({ year: this.currenYear, companyIds: '-1' })
      if (data && status === 0) {
        // 筛选数据为0的，为0过滤掉
        // const newData = data.filter(item => {
        //   return (item.count - 0) !== 0
        // })
        this.ledgerTotal = data.map(val => ({
          name: val.typename,
          num: val.count
        }))
      }
      this.initPieChart()
      this.hideLoading()
    },
    async getExpertStatistics() {
      this.apiNum++
      const { data, status } = await getExpertStatistics({ companyId: '-1', years: this.currenYear })
      if (data && status === 0) {
        // this.stasticData[0].value = data.expertTotal
      }
      this.hideLoading()
    },
    async accidentEventFirstSy() {
      this.apiNum++
      const { data, status } = await accidentEventFirstSy({ year: this.currenYear })
      if (data && status === 0) {
        // this.stasticData[1].value = data.aqAccidentNum
      }
      this.hideLoading()
    },
    initBarChart() {
      const dataY = this.categoryAnalysis.dataY.reverse()
      const dataSeries = [{
        name: '已整改',
        type: 'bar',
        stack: 1,
        data: this.categoryAnalysis.yzg.reverse(),
        itemStyleColor: '#6a99f9'
      }, {
        name: '未整改',
        type: 'bar',
        stack: 1,
        data: this.categoryAnalysis.wzg.reverse(),
        itemStyleColor: '#ccdfff'
      }
      ]
      const params = {
        legendShow: false,
        tooltipShow: true,
        gridRight: '5%',
        gridTop: '12%',
        gridLeft: '0%',
        // gridBottom: '12%',
        saveAsImageName: '隐患类别统计'
      }
      const chart = this.$refs.barChart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        myChart.setOption(lineHorizontalChart(dataY, dataSeries, params))
        this.setLegend(chart, myChart)
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }
    },
    initPieChart() {
      const colorList = ['#ff6959', '#ff8745', '#ffc443', '#ece913', '#a5e025', '#25903c', '#2ecf67', '#16d5b7', '#0db8fd', '#306bbb', '#5959ff', '#9d5bff', '#ee5bff']
      const data = this.ledgerTotal
      const total = data.reduce((previousValue, currentValue, currentIndex, array) => previousValue + currentValue.num, 0)
      const dataList = data.map((v, i) => {
        return {
          value: v.num,
          name: v.name,
          itemStyle: { color: colorList[i] },
          label: {
            color: '#333',
            position: 'outside',
            formatter: (params) => {
              const data = params.data
              if (Number(data.value) === 0) {
                data.labelLine = { show: false }
                data.label.show = false
              } else {
                return `${params.percent}%`
              }
              return `${params.percent}%`
            }
          }
        }
      })
      const dataSeries = [
        {
          name: '危险作业统计',
          // radius: ['50%', '70%'],
          radius: '75%',
          center: ['50%', '46%'],
          data: dataList,
          label: {
            show: true
          }
        }
      ]
      const params = {
        tooltipShow: true,
        legendShow: false,
        // legendOrient: 'vertical',
        // legendRight: 20,
        legendLeft: 'center',
        legendBottom: 0,
        tooltipFormatter: (params) => {
          return `${params.seriesName}<br/>${params.marker}${params.name}：${params.value}(${params.percent}%)<br/>`
        }
      }
      const chart = this.$refs.pieChart
      if (chart) {
        if (total > 0) {
          const myChart = this.$echarts.init(chart)
          const options = pieChart(params, dataSeries, colorList)
          myChart.setOption(options, true)
          this.setLegend(chart, myChart)
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        } else {
          this.layout.chartNoData(chart)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.safety-wrap {
  background-color: #fff;
  .content-box {
    padding: 10px;
    background-color: #e5feff;
    border-radius: 10px;
    border: solid 2px #07cdd4;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    .total {
      width: 40%;
      text-align: center;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      font-size: 0.373rem;
      line-height: 0.533rem;
      h3 {
        color: #07cdd4;
      }
    }
    ul {
      width: 60%;
      display: flex;
      flex-wrap: wrap;
      li {
        width: calc(33.33% - 10px);
        display: flex;
        justify-content: space-between;
        height: 50px;
        background-color: rgba(139, 220, 223, 0.5);
        border-left: solid 2px #07cdd4;
        border-right: solid 2px #07cdd4;
        margin: 5px 5px;
        align-items: center;
        padding: 0 10px;
        font-size: 0.373rem;
        color: #051b32;
        position: relative;
        &::before {
          content: '';
          width: 100%;
          height: 1px;
          border-left: 6px solid #07cdd4;
          border-right: 6px solid #07cdd4;
          position: absolute;
          top: 0;
          left: 0;
        }
        &::after {
          content: '';
          width: 100%;
          height: 1px;
          border-left: 6px solid #07cdd4;
          border-right: 6px solid #07cdd4;
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
    }
    &.firms-content {
      ul {
        li {
          width: calc(50% - 0.13333rem)
        }
      }
    }
    &.firms-content1 {
      background-color: #ddedff;
      border: solid 2px #3f99ff;
      .total {
        h3 {
          color: #3f99ff;
        }
      }
      ul {
        li {
          width: 100%;
          background-color: rgba(156, 198, 245, 0.5);
          border-left: solid 2px #3f99ff;
          border-right: solid 2px #3f99ff;
          &::before {
            border-left: 6px solid #3f99ff;
            border-right: 6px solid #3f99ff;
          }
          &::after {
            border-left: 6px solid #3f99ff;
            border-right: 6px solid #3f99ff;
          }
        }
      }
    }
    &.riskControl-content {
      flex-direction: column;
      background-color: #fff3d9;
      border: solid 2px #fcac00;
      &.riskControl-content3{
        background-color: #ddedff;
        border: solid 0.02667rem #3f99ff;
        .total{
          &:before{
            background-color: #3f99ff;
          }
          h3{
            color: #3f99ff;
          }
        }
        ul li{
          background-color: rgba(156, 198, 245, 0.5);
          border-left: solid 0.02667rem #3f99ff;
          border-right: solid 0.02667rem #3f99ff;
          &:before,&:after{
            border-left: 0.08rem solid #3f99ff;
            border-right: 0.08rem solid #3f99ff;
          }
        }
      }
      &.riskControl-content2{
        background-color: #e5feff;
        border: solid 0.02667rem #07cdd4;
        .total{
          &:before{
            background-color: #07cdd4;
          }
          h3{
            color: #07cdd4;
          }
        }
        ul li{
          background-color: rgba(139, 220, 223, 0.5);
          border-left: solid 0.02667rem #07cdd4;
          border-right: solid 0.02667rem #07cdd4;
          &:before,&:after{
            border-left: 0.08rem solid #07cdd4;
            border-right: 0.08rem solid #07cdd4;
          }
        }
      }
      .total {
        width: 100%;
        display: flex;
        flex-direction: row;
        text-align: left;
        justify-content: flex-start;
        position: relative;
        padding-left: 0.267rem;
        height: 0.373rem;
        &::before {
          content: '';
          left: 0;
          height: 0.373rem;
          width: 0.106rem;
          position: absolute;
          top: 0;
          background-color: #fcac00;
        }
        h3 {
          color: #fcac00;
          margin-left: 0.53rem;
        }
      }
      ul {
        margin-top: 0.133rem;
        width: 100%;
        li {
          //width: calc(33.3% - 10px);
          background-color: rgba(240, 215, 162, 0.5);
          border-left: solid 2px #fcac00;
          border-right: solid 2px #fcac00;
          div {
            display: flex;
            width: 30%;
          }
          &::before {
            border-left: 6px solid #fcac00;
            border-right: 6px solid #fcac00;
          }
          &::after {
            border-left: 6px solid #fcac00;
            border-right: 6px solid #fcac00;
          }
        }
      }
      &.riskControl-content1 {
        flex-direction: column;
        background-color: #f5d8d5;
        border: solid 2px #e56659;
        .total {
          width: 100%;
          display: flex;
          flex-direction: row;
          text-align: left;
          justify-content: flex-start;
          position: relative;
          padding-left: 0.267rem;
          height: 0.373rem;
          &::before {
            content: '';
            left: 0;
            height: 0.373rem;
            width: 0.106rem;
            position: absolute;
            top: 0;
            background-color: #e56659;
          }
          h3 {
            color: #e56659;
            margin-left: 0.53rem;
          }
        }
        ul {
          margin-top: 0.133rem;
          width: 100%;
          li {
            width: calc(25% - 10px);
            background-color: rgba(240, 169, 162, 0.5);
            border-left: solid 2px #e56659;
            border-right: solid 2px #e56659;
            div {
              display: flex;
              width: 30%;
            }
            &::before {
              border-left: 6px solid #e56659;
              border-right: 6px solid #e56659;
            }
            &::after {
              border-left: 6px solid #e56659;
              border-right: 6px solid #e56659;
            }
          }
        }
      }
    }
    &.danger-content {
      background-color: #cedeff;
      border: solid 2px #6a99f9;
      .total {
        width: 35%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        position: relative;
        padding-left: 0.267rem;
        align-items: center;
        &::before {
          content: '';
          left: 0;
          height: 0.373rem;
          width: 0.106rem;
          position: absolute;
          top: 0.187rem;
          background-color: #6a99f9;
        }
        h3 {
          color: #6a99f9;
          margin-left: 0.133rem;
        }
      }
      ul {
        width: 65%;
        li {
          width: calc(50% - 10px);
          background-color: rgba(159, 189, 248, 0.5);
          border-left: solid 2px #6a99f9;
          border-right: solid 2px #6a99f9;
          div {
            display: flex;
            width: 30%;
          }
          &::before {
            border-left: 6px solid #6a99f9;
            border-right: 6px solid #6a99f9;
          }
          &::after {
            border-left: 6px solid #6a99f9;
            border-right: 6px solid #6a99f9;
          }
        }
      }
      &.danger-content1 {
        background-color: #c3eadd;
        border: solid 2px #42d7a7;
        .total {
          width: 42%;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          position: relative;
          padding-left: 0.267rem;
          align-items: center;
          &::before {
            content: '';
            left: 0;
            height: 0.373rem;
            width: 0.106rem;
            position: absolute;
            top: 0.187rem;
            background-color: #42d7a7;
          }
          h3 {
            color: #42d7a7;
            margin-left: 0.133rem;
          }
        }
        ul {
          width: 58%;
          li {
            width: calc(50% - 10px);
            background-color: rgba(136, 230, 200, 0.5);
            border-left: solid 2px #42d7a7;
            border-right: solid 2px #42d7a7;
            div {
              display: flex;
              width: 30%;
            }
            &::before {
              border-left: 6px solid #42d7a7;
              border-right: 6px solid #42d7a7;
            }
            &::after {
              border-left: 6px solid #42d7a7;
              border-right: 6px solid #42d7a7;
            }
          }
        }
      }
    }
  }
  .customTimer {
    margin: 0;
    width: 2.133rem;
    border: 1px solid #3795ff;
    border-radius: 0.106rem;
    ::v-deep .timer-box .down {
      color: #3795ff;
    }
  }
  .stasticBox {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    li {
      width: calc(50% - 5px);
      margin: 5px 10px 5px 0;
      display: flex;
      justify-content: space-between;
      background-image: linear-gradient(-40deg, #4676f3 0%,  #62beff 100%),
      linear-gradient(#eff4fc, #eff4fc);
      background-blend-mode: normal, normal;
      border-radius: 5px;
      padding: 20px 10px;
      align-items: center;
      &:nth-child(even) {
        margin-right: 0;
      }
      &:nth-child(2) {
        background-image: linear-gradient(-40deg, #606eef 0%,#91a0ff 100%),
        linear-gradient( #eff4fc, #eff4fc);
        background-blend-mode: normal, normal;
        .iconBox {
          .iconfont {
            color: #606eef;
          }
        }
      }
      &:nth-child(3) {
        background-image: linear-gradient(-40deg, #f4b111 0%, #f7d650 100%),
        linear-gradient(#eff4fc, #eff4fc);
        background-blend-mode: normal, normal;
        .iconBox {
          .iconfont {
            color: #f4b111;
          }
        }
      }
      .iconBox {
        background-color: rgba(255, 255, 255, 0.6);
        padding: 6px;
        border-radius: 50%;
        width: 72px;
        height: 72px;
        .iconfont {
          width: 60px;
          height: 60px;
          display: inline-block;
          text-align: center;
          line-height: 60px;
          background-color: #ffffff;
          color: #62beff;
          font-size: 0.533rem;
          border-radius: 50%;
        }
      }
      .numBox {
        width: 100%;
        color: #fff;
        padding-left: 5px;
        h3 {
          font-size: 24px;
          line-height: 0.427rem;
        }
        b {
          font-size: 30px;
          font-weight: bold;
          line-height: 0.533rem;
        }
      }
    }
  }
}
</style>
